<template>
    <component
      is="a-modal"
      v-model:visible="visible"
      :width="800"
      :title="title"
      :mask-closable="false"
      :ok-loading="loading"
      @cancel="close"
      @before-ok="submit"
    >
        <!-- 表单信息 start -->
        <a-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          :auto-label-width="true"
        >
          <a-form-item label="语言" field="lang_id">
            <sa-radio v-model="formData.lang_id" :data="paramsData" :valueKey="'id'"></sa-radio>
          </a-form-item>
          <a-form-item label="排序" field="sort">
            <a-input-number v-model="formData.sort" placeholder="请输入" mode="button"  />
          </a-form-item>  
          <a-form-item label="操作密码" field="admin_pay_password">
            <a-input-password
              v-model="formData.admin_pay_password"
              placeholder="请输入"
            />
          </a-form-item>
          <a-form-item label="谷歌验证码" field="google_code">
            <a-input v-model="formData.google_code" placeholder="请输入" />
          </a-form-item>
        </a-form>
    </component>
  </template>
  
  <script setup>
  import { ref, reactive, computed, watch } from "vue";
  import { Message } from "@arco-design/web-vue";
  import languageApi from '@/api/system/system'
  import { throttle } from "lodash";
  import SaRadio from '@cps/sa-radio/index.vue'
  import tool from '@/utils/tool'
  import ENUMS from '@/utils/enums'
  
  const emit = defineEmits(["success"]);
  // 引用定义
  const formRef = ref();
  const mode = ref("");
  const visible = ref(false);
  const loading = ref(false);
  const spinLoading=ref(false)
  let title = computed(() => {
    return "语言添加"
  });
  // 表单信息
  const formData = reactive({
    lang_id:1,
    sort:0,
    admin_pay_password: "",
    google_code: "",
    client:''
  });
  
  // 验证规则
  const rules = ref({
    lang_id: [{ required: true, message: "请输入" }],
    sort: [{ required: true, message: "请输入" }],
    admin_pay_password: [{ required: true, message: "请输入" }],
    google_code: [{ required: true, message: "请输入" }],
  });
  // 打开弹框
  const open = async (data) => {
    getParams(data)
    visible.value = true;
    formRef.value.resetFields();
    spinLoading.value=true
    formData.client=data
  };
  const paramsData=ref([])
  const getParams=async(key)=>{
    const {data}=await languageApi.addLanguageParams({client:key})
    paramsData.value=data.lang
  }
  // 设置数据
  const setFormData = async (data) => {
    for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
        formData[key] = data[key];
      }
    }
  };
  // 数据保存
  const submit = throttle(async (done) => {
    const validate = await formRef.value?.validate();
    if (!validate) {
      loading.value = true;
      try {
        let data = { ...formData };
        console.log('data',data);
        const result = await languageApi.addLanguage(data);
        if (result.code === 200) {
          Message.success("操作成功");
          emit("success");
          done(true);
        }
        // 防止连续点击提交
        setTimeout(() => {
          loading.value = false;
        }, 500);
      } catch {
        loading.value = false;
      }
    }
    done(false);
  }, 100);
  
  // 关闭弹窗
  const close = () => (visible.value = false);
  defineExpose({ open, setFormData });
  </script>
  